<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>api权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-button type="primary" size="mini" @click="handleDrawer('添加')">Add</el-button>
      <hr>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="api_id" label="##"  />
        <el-table-column prop="api_content" label="说明"  />
        <el-table-column prop="api_method" label="请求方法"  />
        <el-table-column prop="api_path" label="请求地址"  />
        <el-table-column prop="api_statu" label="状态"  >
          <template #default="props">
            <el-tag type="success" v-if="props.row.api_statu === 1">启用</el-tag>
            <el-tag type="warning" v-if="props.row.api_statu === 2">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="##" label="操作"  >
          <template #default="props">
            <el-button type="primary" @click="handleDrawer(props.row)" size="mini">Edit</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--添加/修改-->
      <el-drawer
          v-model="drawer"
          :title="title===1?'添加':'更新'"
          direction="rtl"
          :before-close="handleClose"
      >

        <el-form ref="form" :model="datainfo" label-width="120px">
          <el-form-item label="名称">
            <el-input v-model="datainfo.api_content"></el-input>
          </el-form-item>
          <el-form-item label="请求方式">
            <el-select v-model="datainfo.api_method" placeholder="Select">
              <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请求地址">
            <el-input v-model="datainfo.api_path" placeholder="请求地址"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-radio v-model="datainfo.api_statu" :label="1">启用</el-radio>
            <el-radio v-model="datainfo.api_statu" :label="2">禁用</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">{{ title === 1 ? 'Create' : 'Update' }}</el-button>
          </el-form-item>
        </el-form>

      </el-drawer>

    </el-card>
  </div>
</template>

<script>
import {onMounted, reactive, toRefs} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  setup() {
    const state = reactive({
      tableData: [],
      datainfo: {},
      options: [
        "GET","POST","PUT","DELETE"
      ],
      drawer: false,
      title: 1,
    })

    onMounted(() => {
      GetData()
    })

    const GetData = async () => {
      const {data: res} = await axios.get('route/api')
      if (res.code !== 1000) return ElMessage.error(res.msg)
      state.tableData = res.data
    }

    //编辑
    const handleDrawer = (data) => {
      state.drawer = true
      if (data === '添加') {
        state.title = 1
      } else {
        state.title = 2
        state.datainfo = data
      }
    }
    const handleClose = () => {
      state.drawer = false
    }

    const save = async () => {
      if (state.title ===1){
        const {data: res} = await axios.put('route/api', state.datainfo)
        if (res.code !== 1000) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
      }else{
        const {data: res} = await axios.post('route/api', state.datainfo)
        if (res.code !== 1000) return ElMessage.error(res.msg)
        ElMessage.success(res.msg)
      }
      GetData()
    }

    return {
      ...toRefs(state),
      GetData,
      save,
      handleDrawer,
      handleClose,
    }
  }
}
</script>

<style scoped>

</style>
